<template>
  <!-- 主要内容区域 -->
  <section class="con">
    <!-- 导航路径区域 -->
    <div class="conPoin">
      <div class="conPoin">
        <a v-for="(item, index) in top_title_list" :key="index">{{ item }}</a>
      </div>
    </div>
    <!-- 主要内容区域 -->
    <div class="mainCon">
      <!-- 左侧放大镜区域 -->
      <div class="previewWrap">
        <!--放大镜效果-->
        <div class="preview">
          <div class="jqzoom">
            <div ref="sma_box" class="sma_box" @mouseenter="show_mask" @mouseleave="hide_mask" @mousemove="set_mask_position">
              <img :src="img_list[current_index].imgUrl" />
              <div v-if="is_show_mask" ref="move_mask" class="mask"></div>
            </div>
            <div v-show="is_show_mask" class="big_box" ref="big_box">
              <img ref="big_img" :src="img_list[current_index].imgUrl" />
            </div>
          </div>
        </div>
        <!--下方的缩略图-->
        <div class="swiper-container mySwiper">
          <div class="swiper-wrapper">
            <div @click="togg_img(index)" class="swiper-slide" :key="item.id" v-for="(item, index) in goodInfo.skuImageList">
              <img :src="item.imgUrl" />
            </div>
          </div>
          <div class="swiper-button-next">></div>
          <div class="swiper-button-prev">&#60;</div>
        </div>
      </div>
      <!-- 右侧选择区域布局 -->
      <div class="InfoWrap">
        <div class="goodsDetail">
          <h3 class="InfoName">{{ goodInfo.skuName }}</h3>
          <p class="news">{{ goodInfo.skuDesc }}</p>
          <div class="priceArea">
            <div class="priceArea1">
              <div class="title">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</div>
              <div class="price">
                <i>¥</i>
                <em>{{ goodsDetail_obj.price }}</em>
                <span>降价通知</span>
              </div>
              <div class="remark">
                <i>累计评价</i>
                <em>65545</em>
              </div>
            </div>
            <div class="priceArea2">
              <div class="title">
                <i>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</i>
              </div>
              <div class="fixWidth">
                <i class="red-bg">加价购</i>
                <em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
              </div>
            </div>
          </div>
          <div class="support">
            <div class="supportArea">
              <div class="title">支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</div>
              <div class="fixWidth">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</div>
            </div>
            <div class="supportArea">
              <div class="title">配 送 至</div>
              <div class="fixWidth">广东省 深圳市 宝安区</div>
            </div>
          </div>
        </div>
        <div class="choose">
          <div class="chooseArea">
            <div class="choosed"></div>
            <dl v-for="item in spuSaleAttrList" :key="item.id">
              <dt class="title">{{ item.saleAttrName }}</dt>
              <dd
                @click="chage_attrval(attrval, item)"
                v-for="attrval in item.spuSaleAttrValueList"
                :key="attrval.id"
                changepirce="0"
                :class="{ active: attrval.isChecked === '0' }"
              >
                {{ attrval.saleAttrValueName }}
              </dd>
            </dl>
          </div>
          <div class="cartWrap">
            <div class="controls">
              <input @blur="checkedVal" v-model="goods_count" autocomplete="off" class="itxt" />
              <a href="javascript:" class="plus" @click="goods_count++">+</a>
              <a href="javascript:" class="mins" @click="goods_count <= 1 ? (goods_count = 1) : goods_count--">-</a>
            </div>
            <div class="add">
              <a @click="click_addtToShopcar_onfun">加入购物车</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { mapGetters, mapState, mapActions } from 'vuex'
import Swiper from 'swiper'
export default {
  data() {
    return {
      is_show_mask: false,
      current_index: 0,
      goods_count: 1,
    }
  },
  computed: {
    ...mapState('goodsdetail', ['goodsDetail_obj']),
    ...mapGetters('goodsdetail', ['spuSaleAttrList', 'goodInfo', 'top_title_list']),
    img_list() {
      return this.goodInfo.skuImageList || [{}]
    },
  },
  methods: {
    ...mapActions('shopcart', ['add_shopGoods']),
    show_mask(e) {
      this.is_show_mask = true
    },
    hide_mask() {
      this.is_show_mask = false
    },
    // 控制放大镜 的遮罩以及 大图片的 移动
    set_mask_position(e) {
      const move_box = this.$refs.move_mask
      const big_box = this.$refs.big_box
      const big_img = this.$refs.big_img
      let left_ = e.offsetX - move_box.offsetWidth / 2
      let top_ = e.offsetY - move_box.offsetWidth / 2

      if (left_ < 0) {
        left_ = 0
      } else if (left_ > move_box.offsetWidth) {
        left_ = move_box.offsetWidth
      }

      if (top_ < 0) {
        top_ = 0
      } else if (top_ > move_box.offsetHeight) {
        top_ = move_box.offsetHeight
      }
      move_box.style.left = `${left_}px`
      move_box.style.top = `${top_}px`
      // 大图片的移动
      big_img.style.left = `${-(left_ * (big_box.offsetWidth / move_box.offsetWidth))}px`
      big_img.style.top = `${-(top_ * (big_box.offsetHeight / move_box.offsetHeight))}px`
    },
    // 修改属性值
    chage_attrval(attrval, attr) {
      attr.spuSaleAttrValueList.forEach((item) => {
        item.isChecked = '1'
      })
      attrval.isChecked = '0'
    },
    my_init() {
      var swiper = new Swiper('.mySwiper', {
        slidesPerView: 3,
        spaceBetween: 30,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      })
    },
    // 切换放大镜的图片
    togg_img(index) {
      this.current_index = index
    },
    // 修改商品数量
    checkedVal() {
      if (!(this.goods_count - 0)) {
        this.goods_count = 1
      } else if (this.goods_count <= 1) {
        this.goods_count = 1
      } else {
        this.goods_count = parseInt(this.goods_count)
      }
    },
    // 派发 action 调接口 添加商品到 购物车
    async click_addtToShopcar_onfun() {
      try {
        await this.add_shopGoods({ skuiD: this.$route.query.skuId, skuNum: this.goods_count })
        window.sessionStorage.setItem('detaileInfo', JSON.stringify(this.goodsDetail_obj))
        this.$router.replace({ path: '/add_goods_succ', query: { goods_count: this.goods_count, isclick: true } })
      } catch {
        this.$Msg.error('添加失败!')
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.my_init()
    })
  },
  watch: {
    goodInfo: {
      handler() {
        this.$nextTick(() => {
          this.my_init()
        })
      },
    },
  },
}
</script>

<style lang="less" scoped>
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.con {
  width: 1200px;
  margin: 15px auto 0;
  .conPoin {
    padding: 9px 15px 9px 0;
    & > a + a:before {
      content: '/\00a0';
      padding: 0 5px;
      color: #ccc;
    }
  }
  .mainCon {
    overflow: hidden;
    margin: 5px 0 15px;
    .previewWrap {
      float: left;
      width: 400px;
      position: relative;
      .preview {
        width: 400px;
        height: 400px;
        border: 1px solid #dfdfdf;
        .jqzoom {
          cursor: pointer;
          width: 400px;
          height: 400px;
          position: relative;
          img {
            width: 100%;
          }
          .sma_box {
            position: relative;
            img {
              width: 100%;
              height: 100%;
            }
            .mask {
              // background-color: red;
              width: 200px;
              height: 200px;
              background: rgba(0, 255, 255, 0.8);
              position: absolute;
              left: 0px;
              top: 0px;
              border: 1px solid #ddd;
              pointer-events: none;
            }
          }

          .big_box {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 400px;
            top: 0;
            border: 1px solid #ddd;
            overflow: hidden;
            img {
              position: absolute;
              width: auto;
              height: auto;
            }
          }
        }
        .maxbox {
          width: 400px;
          height: 400px;
          position: absolute;
          left: 420px;
          top: 0px;
          overflow: hidden;
          z-index: 20;
          border: 1px solid #ddd;
          img {
            width: 800px;
            height: 800px;
            display: block;
          }
        }
      }
      .swiper-container {
        height: 56px;
        width: 412px;
        box-sizing: border-box;
        padding: 0 12px;
        position: relative;
        .swiper-slide {
          width: 56px;
          height: 56px;

          img {
            width: 100%;
            height: 100%;
            border: 1px solid #ccc;
            padding: 2px;
            width: 50px;
            height: 50px;
            display: block;

            &.active {
              border: 2px solid #f60;
              padding: 1px;
            }

            &:hover {
              border: 2px solid #f60;
              padding: 1px;
            }
          }
        }

        .swiper-button-next {
          position: absolute;
          left: auto;
          right: 10px;
          line-height: 56px;
        }

        .swiper-button-prev {
          position: absolute;
          left: 0;
          right: auto;
          line-height: 56px;
        }

        .swiper-button-next,
        .swiper-button-prev {
          box-sizing: border-box;
          width: 12px;
          height: 56px;
          background: rgb(235, 235, 235);
          border: 1px solid rgb(204, 204, 204);
          top: 0;
          margin-top: 0;
          &::after {
            font-size: 12px;
          }
        }
      }
    }
    .InfoWrap {
      width: 700px;
      float: right;
      .InfoName {
        font-size: 14px;
        line-height: 21px;
        margin-top: 15px;
      }
      .news {
        color: #e12228;
        margin-top: 15px;
      }
      .priceArea {
        background: #fee9eb;
        padding: 7px;
        margin: 13px 0;
        .priceArea1 {
          overflow: hidden;
          line-height: 28px;
          margin-top: 10px;
          .title {
            float: left;
            margin-right: 15px;
          }
          .price {
            float: left;
            color: #c81623;
            i {
              font-size: 16px;
            }
            em {
              font-size: 24px;
              font-weight: 700;
            }
            span {
              font-size: 12px;
            }
          }
          .remark {
            float: right;
          }
        }
        .priceArea2 {
          overflow: hidden;
          line-height: 28px;
          margin-top: 10px;
          .title {
            margin-right: 15px;
            float: left;
          }
          .fixWidth {
            width: 520px;
            float: left;
            .red-bg {
              background: #c81623;
              color: #fff;
              padding: 3px;
            }
            .t-gray {
              color: #999;
            }
          }
        }
      }
      .support {
        border-bottom: 1px solid #ededed;
        padding-bottom: 5px;
        .supportArea {
          overflow: hidden;
          line-height: 28px;
          margin-top: 10px;
          .title {
            margin-right: 15px;
            float: left;
          }
          .fixWidth {
            width: 520px;
            float: left;
            color: #999;
          }
        }
      }
      .choose {
        .chooseArea {
          overflow: hidden;
          line-height: 28px;
          margin-top: 10px;
          // .choosed {
          //   mark {
          //     height: 30px;
          //     display: inline-block;
          //     line-height: 30px;
          //     background-color: snow;
          //     border: 1px solid #ddd;
          //     padding: 0 20px;
          //     margin-right: 20px;
          //     a {
          //       font-size: 12px;
          //       color: red;
          //       margin-left: 20px;
          //       cursor: pointer;
          //     }
          //   }
          // }
          dl {
            overflow: hidden;
            margin: 13px 0;
            dt {
              margin-right: 15px;
              float: left;
            }
            dd {
              float: left;
              margin-right: 5px;
              color: #666;
              line-height: 24px;
              padding: 2px 14px;
              border-top: 1px solid #eee;
              border-right: 1px solid #bbb;
              border-bottom: 1px solid #bbb;
              border-left: 1px solid #eee;
            }
            .active {
              color: green;
              background-color: skyblue;
              font-size: 13px;
            }
          }
        }
        .cartWrap {
          .controls {
            width: 48px;
            position: relative;
            float: left;
            margin-right: 15px;
            .itxt {
              width: 38px;
              height: 37px;
              border: 1px solid #ddd;
              color: #555;
              float: left;
              border-right: 0;
              text-align: center;
            }
            .plus,
            .mins {
              width: 15px;
              text-align: center;
              height: 17px;
              line-height: 17px;
              background: #f1f1f1;
              color: #666;
              position: absolute;
              right: -8px;
              border: 1px solid #ccc;
            }
            .mins {
              right: -8px;
              top: 19px;
              border-top: 0;
            }
            .plus {
              right: -8px;
            }
          }
          .add {
            float: left;
            a {
              background-color: #e1251b;
              padding: 0 25px;
              font-size: 16px;
              color: #fff;
              height: 36px;
              line-height: 36px;
              display: block;
            }
          }
        }
      }
    }
  }
}
</style>